<!-- 角色配置 -->
<template>
  <div class="wrapper-card">
      <div class="search-con search-con-top">
        <div class="mt">
          <Button type="primary" @click="addBtn" icon="md-add">新增角色</Button>
        </div>
      </div>
      <Table 
        border 
        :columns="columns" 
        :data="data" 
        :stripe="true" 
        class="tableMargin"
      >
        <template slot-scope="{ row }" slot="operation">
          <Button type="primary" ghost>编辑</Button>
          <Button type="error" ghost>删除</Button>
        </template>
      </Table>
      <Page
        :total="pageTotal"
        :current="pageno"
        :page-size="pageSize"
        @on-change="handlePage"
        prev-text="上一页"
        next-text="下一页"
      />

      <Drawer
          class="drawer"
          :closable="false"
          :width="drawerConfig.width || 700"
          v-model="drawerConfig.isShow"
          @on-visible-change="drawerCallBack({ type: 'drawerChange', item: $event })"
      >
        <div class="title" slot="header">
            <span>{{ drawerConfig.preDrawerTitle[drawerConfig.CURD] + drawerConfig.title }}</span>
            <i @click="drawerConfig.isShow = false" class="ivu-icon ivu-icon-ios-close"></i>
        </div>
        <div class="body" ref="drawer-body" id="body">
            <Form ref="formValidate" label-position="left" :model="form" :rules="drawerConfig.ruleValidate" :label-width="100" :disabled="drawerConfig.formDisabled">

            </Form>
        </div>
        <div class="drawer-footer">
            <Button @click="drawerConfig.isShow = false;$refs['formValidate'].resetFields()">{{ drawerConfig.CURD === 'R' ? '关闭' : '取消' }}</Button>
            <Button
                type="primary"
                style="margin-left: 20px"
                v-if="drawerConfig.CURD !== 'R'"
                @click="submitForm('formValidate')"
                :loading="drawerConfig.SubmitBtnLoading"
                >{{ drawerConfig.SubmitBtnLoading ? '处理中...' : '确定' }}
            </Button>
        </div>
      </Drawer>
  </div>
</template>

<script>

export default {
  data () {
    return {
      //分页
      pageTotal: null, //数据总数
      pageno: 1, //当前页码数
      pageSize: 10, //每页条数
      // 表格
      columns: [
        {
          title: "角色名",
          key: "roleName",
          align: "center"
        },
        {
          title: "创建时间",
          key: "createTime",
          align: "center"
        },
        {
          title: "操作",
          slot: "operation",
          align: "center"
        }
      ],
      data: [
        {
          roleName: '阿粒',
          createTime: '2022.03.13'
        }
      ],
      // 抽屉
      drawerConfig: {
          isShow: false,
          state: 0, //抽屉状态默认0关闭
          CURD: "C", //增删改查模式 默认c(增)
          title: "角色", //抽屉标题
          preDrawerTitle: {
              C: "新增",
              U: "修改",
              R: '查看'
          },
          SubmitBtnLoading: false,//提交按钮加载状态
          detailTransform: data => { //处理 默认值

          }, //获取详情数据后的处理函数
          beforeSubmit: data => {//处理下抽屉提交表单前的数据
              return data;
          },
          formDisabled: false,//form表单是否禁用
          ruleValidate: { //form表单字段校验
              roleType: [{ required: true, message: '请选择角色类型' }],
              roleCode: [{ required: true, validator: validateRole, target: 'blur,change' }],
              roleName: [{ required: true, validator: validateRole, target: 'blur,change' }],
          },
          
      },
      // 抽屉中的数据
      form: {
          companyCode: localStorage.getItem('companyCode'),
          roleType: null, 
          roleCode: '',  
          roleName: '',  
          roleDescription: '',
          menuRightList: [],
          adminRightList: [],
          phoneRightList: []
      },
    }
  },
  mounted(){
    this.getRolesData();
  },
  methods:{
    handlePage(value){
      this.pageno = value;
      this.getRolesData(value);
    },
    // 角色
    roleUser(pageNow){
      let data={
          pageno:pageNow
      }
      this.getRoleUserData(this.roleId,data)
    },
    // 获取角色的用户
    getRoleUserData(roleId,params){
        getRoleUser(roleId,params).then(res=>{
            this.roleUserData = res.data.data.list;
            this.roleTotal = res.data.data.total;
        })
    },
    // 获取角色列表
    getRolesData(pageno) {
      let data = {
          pageno: pageno
      }
      getRoles(data).then(res=>{
          this.data = res.data.data.list;
          this.pageTotal = res.data.data.total;
      })
    },
  },
}
</script>

<style lang="less" scoped>
</style>
